<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>实时监控-最小耗时</title>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.0.7/dist/g2.min.js"></script>
</head>
<body>
<p>QPS统计-最小耗时</p>
<br>
<div id='container' style="margin: 10px"/>
</body>

<script>
  Date.prototype.format = function(fmt) {
       var o = {
          "M+" : this.getMonth()+1,                 //月份
          "d+" : this.getDate(),                    //日
          "h+" : this.getHours(),                   //小时
          "m+" : this.getMinutes(),                 //分
          "s+" : this.getSeconds(),                 //秒
          "q+" : Math.floor((this.getMonth()+3)/3), //季度
          "S"  : this.getMilliseconds()             //毫秒
      };
      if(/(y+)/.test(fmt)) {
              fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
       for(var k in o) {
          if(new RegExp("("+ k +")").test(fmt)){
               fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
           }
       }
      return fmt;
  }

  const chart = new G2.Chart({
    container: 'container',
    autoFit: false,
    height: 300,
     width: 1000
  });

  chart.removeInteraction('legend-filter');
  chart.path().position('date*min').color('#1890ff');
  //chart.path().position('date*max').color('#1fc25b');
  //chart.path().position('date*mean').color('#FFB6C1');
  //chart.path().position('date*stddev').color('#8A2BE2');
  //chart.path().position('date*median').color('#AFEEEE');
  chart.option('slider', {
    end: 1.0
  });
  const storage = [{
    "date": new Date().format("mm:ss"),
    "min": 0,
    "max": 0,
    "mean": 0,
    "stddev": 0,
    "median": 0
  }];
  chart.data(storage);
  chart.render();
  setInterval(countUp, 1000);
  function countUp() {
    let date = new Date().format("mm:ss");
    fetch('./data', {method: 'PATCH'})
      .then(res => res.json())
      .then(data => {
        if (storage.length > 240) {
          storage.shift();
        }
        storage.push({
          "date": date,
          "min": data["vertx.http.servers.0.0.0.0:8082.requests"]["min"],
          "max": data["vertx.http.servers.0.0.0.0:8082.requests"]["max"],
          "mean": data["vertx.http.servers.0.0.0.0:8082.requests"]["mean"],
          "stddev": data["vertx.http.servers.0.0.0.0:8082.requests"]["stddev"],
          "median": data["vertx.http.servers.0.0.0.0:8082.requests"]["median"]
        });
      });
    chart.changeData(storage);
  }
</script>
</html>
